<template>
  <div class="pop-el-wrap" :class="isShow ? 'from-pop':''">
    <div class="pop-el"  v-show="isShow" :style="{left: left, top: top, zIndex: zIndex }" >
      <div class="pop-el-body">
        {{content}}
      </div>
      <i class="pop-el-arrow"></i>
    </div>
    <slot></slot>
  </div>
</template>
<style lang="less">
   
    .from-pop + * {
        border: 1px solid #f94949;
    }
  .pop-el-wrap {
    // position: relative;
   
    .pop-el {
        position: absolute;
    }
    .pop-el-body {
        padding: 5px 10px;
        background-color: rgb(254, 241, 241);
        color: #f94949;
        font-size: 13px;
        border-radius: 5px;
        box-shadow: 1px 2px 1px rgb(225, 221, 222);
        white-space: nowrap;
    }
    .pop-el-arrow {
        display: inline-block;
        height: 8px;
        width: 8px;
        position: absolute;
        left: 0;
        right: 0;
        top: 2rem;
        margin: auto;
        transform: rotate(45deg);
        background-color: rgb(254, 241, 241);
        box-shadow: 1px 2px 1px rgb(225, 221, 222);
    }
    .pop-el.bottom pop-el-body {
        box-shadow: 1px -2px 1px rgb(225, 221, 222);
    }
    .pop-el.bottom pop-el-arrow {
        top: -5px;
        transform: rotate(225deg);
    }
  }
 

</style>
<script>
  export default{
    name:"FormPop",
    props: {
        content:{
            type: String,
            default: ""
        },
        left:{
            type: String,
            default: ""
        },
        top:{
            type: String,
            default: "-3rem"
        },
      
    },
    data () {
      return {
        p:""
      }
    },
    computed: {
        isShow:function(){
            const {content} = this;
            return content && content.length > 0;
        },
        zIndex:function(){
            const {content} = this;
            return (content && content.length > 0) ? 9999 : 0;
        }
    },
    watch: {
      
    },
    
    methods: {
      
    }
  }
</script>